<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <style>
        .menu-tree {
            width: 30%;
        }

        .menu-form {
            display: block;
            position: absolute;
            left: 35%;
            width: 60%;
            top: 15px;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <!--树形菜单-->
    <div class="layui-card menu-tree">
        <div class="layui-card-header">
            <button id="addCustomMenu" class="layui-btn layui-btn-normal layui-btn-sm layui-btn-disabled">新建自定义菜单
            </button>
        </div>
        <div class="layui-card-body">
            <div class="" id="menuTree"></div>

        </div>
    </div>
    <!--表单-->
    <div class="info-form layui-card menu-form" id="menuFormWrap" style="display: none;">

    </div>

</div>

<script type="text/html" id="menuFormTmp">
    {@if !innerMenu && action !="add" }
    <div class="layui-card-header">
        <button data-id="" class="layui-btn layui-btn-sm layui-btn-danger" id="delCustom">删除
        </button>
    </div>
    {@/if}
    <!--评审项-->
    <div class="layui-form layui-card-body" id="menuForm" lay-filter="menuForm">
        <div class="info-basic">
            <div class="layui-form-item">
                <label class="layui-form-label required">菜单类型</label>
                <div class="layui-input-block ">
                    <div class="layui-form-mid">
                        {@if innerMenu}
                        <span class="layui-badge">内置菜单</span>
                        {@else}
                        <span class="layui-badge layui-bg-blue">自定义菜单</span>
                        {@/if}
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="menuName" lay-verify="required"
                           lay-verType="tips" value="${menuName}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">菜单别名</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input layui-text" name="aliasName" lay-verify="required"
                           lay-verType="tips" value="${aliasName}"
                           {@if action=='add' || !innerMenu}
                           {@else}
                           readonly
                           {@/if}
                    >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">映射页面</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="menuPage" lay-verify=""
                           lay-verType="tips" value="${menuPage}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">是否显示</label>
                <div class="layui-input-block">
                    <input type="checkbox" value="true" lay-filter="viewable" name="viewable" lay-skin="switch"
                           lay-text="显示|隐藏"
                           {@if viewable || action== 'add'}
                    checked
                    {@/if}
                    >
                </div>
            </div>

            {@if action == "add"}
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-sm info-item-form-submit"
                            lay-submit lay-filter="addMenuBtn">
                        确认新建
                    </button>
                </div>
            </div>
            {@else}
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button style="width: 100%" class="layui-btn layui-btn-sm info-item-form-submit"
                            lay-submit lay-filter="saveMenuBtn">
                        保存
                    </button>
                </div>
            </div>
            {@/if}
        </div>

    </div>
</script>

<script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../layuiadmin/lib/juicer-min.js"></script>

<script type="text/html" id="menusForm">
    <div class="layui-card-body">
        <div class="layui-form" lay-filter="menusForm">
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="menuName" lay-verify="required" placeholder="请输入菜单名称" autocomplete="off"
                           class="layui-input" value="${menuName}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">别名</label>
                <div class="layui-input-block">
                    <input type="text" name="aliasName" lay-verify="required" placeholder="请输入别名" autocomplete="off"
                           class="layui-input" value="${aliasName}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单映射页面</label>
                <div class="layui-input-block">
                    <input type="text" name="menuPath" placeholder="请输入菜单映射页面" autocomplete="off"
                           class="layui-input" value="${menuPage}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <input type="button" class="layui-btn" style="width: 100%" lay-submit lay-filter="menusFormSubmit"
                       id="menusFormSubmit" value="保存">
            </div>
        </div>

    </div>
</script>
<script>
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'menus', 'table', 'setter', 'code', 'auth', 'treeMenu', 'layer'], function () {
        var $ = layui.$
            , form = layui.form
            , menus = layui.menus
            , setter = layui.setter
            , table = layui.table
            , treeMenu = layui.treeMenu
            , layer = layui.layer
            , tm = null
        ;

        function renderTreeTable(data) {
            $.each(data, function (index, item) {
                item.name = item.menuName;
            })
            tm = treeMenu.customRender({
                elem: "#menuTree"
                , nodes: data
                , edit: {
                    showToolBar: false
                    , remove: false
                }
                , treeConfig: {
                    data: {
                        simpleData: {
                            enable: true
                            , pIdKey: "parentId"
                        }
                    }
                    , edit: {
                        drag: {
                            autoExpandTrigger: true,
                            prev: true,
                            inner: true,
                            next: true
                        }

                    }
                }
            })

            tm.on("afterDrag", function (params) {
                var all = tm.getAllNodes();
                var dragMenu = [];
                $.each(all, function (index, item) {
                    dragMenu.push({
                        id: item.id
                        , seq: item.getIndex()
                        , parentId: item.parentId
                    })
                })
                menus.methods.drag(dragMenu);
            })

            //菜单被选中回调
            tm.on("select", function (node) {
                console.log(node)
                $("#menuFormWrap").show();

                //回显属性
                var html = juicer("#menuFormTmp", node);
                $("#menuFormWrap").html(html);
                form.render('checkbox');

                //更新菜单
                form.on('submit(saveMenuBtn)', function (data) {
                    var toUpdateMenu = data.field;
                    if (!toUpdateMenu.viewable) {
                        toUpdateMenu.viewable = false;
                    }
                    toUpdateMenu.id = node.id;
                    var loadIndex = layer.load(2);
                    menus.methods.update(toUpdateMenu)
                        .always(function () {
                            layer.close(loadIndex);
                        })
                        .done(function (res) {
                            layer.msg("保存成功", {icon: 1})
                            node.name = toUpdateMenu.menuName;
                            node.menuName = toUpdateMenu.menuName;
                            node.aliasName = toUpdateMenu.aliasName;
                            node.menuPage = toUpdateMenu.menuPage;
                            node.viewable = toUpdateMenu.viewable;
                            tm.updateNode(node);
                        })
                    return false;
                });

                //绑定删除自定义菜单
                $("#delCustom").on("click", function (e) {
                    var currentNode = tm.getCurrentNode();
                    var id = node.id;
                    if (!id) {
                        return;
                    }

                    layer.confirm("您确定要删除该菜单，删除后不可恢复!", {icon: 0}, function (index) {
                        var loadIndex = layer.load(2);
                        menus.methods.delCustom(id)
                            .always(function () {
                                layer.close(loadIndex);
                                layer.close(index);
                            })
                            .done(function (res) {
                                var rows = res.data;
                                if (rows > 0) {
                                    layer.msg("删除成功", {icon: 1});
                                    tm.delNode(currentNode);
                                } else {
                                    layer.msg("删除失败", {icon: 2});
                                }
                            })
                    })
                })
            })

        }

        var loadIndex = layer.load(2);
        menus.methods.all()
            .always(function () {
                layer.close(loadIndex);
                $("#addCustomMenu").removeClass("layui-btn-disabled");
                $("#addCustomMenu").on("click", function () {
                    addCustomMenu();
                })
            }).done(function (res) {
            var data = res.data;
            renderTreeTable(data);
        })

        //新建自定义菜单
        function addCustomMenu() {
            layer.open({
                title: "新建自定义菜单"
                , type: 1
                , area: "400px"
                , content: juicer("#menuFormTmp", {innerMenu: false, action: "add"})
                , success: function (layero, index) {
                    //新建菜单
                    form.render();
                    form.on('submit(addMenuBtn)', function (data) {
                        var newMenu = data.field;
                        var currentNode = tm.add(null, newMenu.menuName, newMenu);
                        if (!newMenu.viewable) {
                            newMenu.viewable = false;
                        }

                        newMenu.seq = currentNode.getIndex();

                        var loadIndex = layer.load(2);
                        menus.methods.add(newMenu)
                            .always(function () {
                                layer.close(loadIndex)
                            }).done(function (res) {
                            var data = res.data;
                            currentNode.id = data.id;
                            currentNode.menuName = data.menuName;
                            currentNode.aliasName = data.aliasName;
                            currentNode.menuPage = data.menuPage;
                            currentNode.viewable = data.viewable;
                            layer.close(index);
                            tm.onSelect("select", "", currentNode);
                        })
                            .fail(function () {
                                tm.delNode(currentNode);
                            })
                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                    });
                }

            })
        }


    });
</script>
</body>
</html>
